import React from 'react';
import { cn } from '@/lib/utils';

// 错银铜牛灯的模拟数据
const silverInlaidOxLampData = {
  title: "错银铜牛灯",
  subtitle: "会吞烟吐雾的机械牛",
  imageDescription: "牛身中空，点燃灯油后，烟通过牛角进入腹部溶解于水",
  basicInfo: {
    age: "汉代",
    material: "青铜错银",
    size: "高46cm，长36cm",
    feature: "环保设计+可旋转灯罩",
    exhibitionHall: "汉代馆",
    amazingFeature: "两千年前的“空气净化器”！"
  },
  function: "照明+净化烟雾，贵族书房用具，兼顾实用与美学。",
  values: [
    {
      title: "科技超前",
      description: "烟尘回收系统领先世界千年"
    },
    {
      title: "工艺精美",
      description: "牛身错银云纹，灯罩可调节光线"
    },
    {
      title: "功能完整",
      description: "出土时仍可正常使用"
    }
  ],
  studentTask: "想一想，点燃灯油后，烟会顺着牛的哪个部位钻进它的肚子里？",
  introduction: "我是一头爱干净的“环保牛”，专门“吃”油烟，保护主人的肺！"
};

// 错银铜牛灯页面组件
export default function SilverInlaidOxLampPage() {
  return (
    <div className="max-w-3xl mx-auto bg-white p-4 md:p-6 shadow-sm">
      {/* 顶部横幅区域 */}
      <header className="bg-gradient-to-r from-teal-500 to-cyan-600 text-white rounded-t-lg p-4 mb-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl md:text-3xl font-bold mb-1">{silverInlaidOxLampData.title}</h1>
            <p className="text-teal-100">{silverInlaidOxLampData.subtitle}</p>
          </div>
          <div className="bg-white/20 rounded-full px-3 py-1 text-sm backdrop-blur-sm">
            可打印版本
          </div>
        </div>
      </header>

      {/* 主要内容区域 */}
      <main className="space-y-8">
        {/* 文物图片与基本档案区 */}
        <section className="flex flex-col md:flex-row gap-6">
          {/* 文物图片 */}
          <div className="md:w-1/3 flex flex-col items-center">
            <div className="bg-teal-50 w-full aspect-square rounded overflow-hidden flex items-center justify-center mb-2">
                <img 
                  src="https://lf-code-agent.coze.cn/obj/x-ai-cn/279122722562/attachment/7_20250926145808.jpg" 
                  alt="错银铜牛灯" 
    className="w-full h-full object-cover p-0"
               />
            </div>
            <p className="text-sm text-gray-600 text-center italic">
              ▲ {silverInlaidOxLampData.imageDescription}
            </p>
          </div>

          {/* 基本档案 */}
          <div className="md:w-2/3 bg-gray-50 border-l-4 border-teal-500 p-4">
            <h2 className="text-lg font-bold text-gray-800 mb-3 flex items-center">
              <span className="bg-teal-100 text-teal-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
                ■
              </span>
              基本档案
            </h2>
            <ul className="space-y-2 text-sm text-gray-700">
              <li className="flex">
                <span className="font-medium w-20">年代：</span>
                <span>{silverInlaidOxLampData.basicInfo.age}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">材质：</span>
                <span>{silverInlaidOxLampData.basicInfo.material}</span>
              </li>
              <li className="flex"> 
                <span className="font-medium w-20">尺寸：</span>
                <span>{silverInlaidOxLampData.basicInfo.size}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">特色：</span>
                <span>{silverInlaidOxLampData.basicInfo.feature}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">展厅：</span>
                <span>{silverInlaidOxLampData.basicInfo.exhibitionHall}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">神奇之处：</span>
                <span className="font-semibold text-teal-700">{silverInlaidOxLampData.basicInfo.amazingFeature}</span>
              </li>
            </ul>
          </div>
        </section>

        {/* 它是干什么的？ */}
        <section>
          <h2 className="text-lg font-bold text-gray-800 mb-2 flex items-center">
            <span className="bg-teal-100 text-teal-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
              ◇
            </span>
            它是干什么的？
          </h2>
          <p className="text-gray-700 pl-7">{silverInlaidOxLampData.function}</p>
        </section>

        {/* 为什么这么珍贵？ */}
        <section>
          <h2 className="text-lg font-bold text-gray-800 mb-3 flex items-center">
            <span className="bg-teal-100 text-teal-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
              ▼
            </span>
            为什么这么珍贵？
          </h2>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {silverInlaidOxLampData.values.map((value, index) => (
              <div key={index} className="bg-teal-50 p-4 rounded-lg border border-teal-100">
                <h3 className="font-bold text-teal-800 text-sm mb-1 flex items-center">
                  <span className="text-teal-500 mr-1">✔</span>
                  {value.title}
                </h3>
                <p className="text-xs text-gray-700">{value.description}</p>
              </div>
            ))}
          </div>
        </section>

        {/* 幽默自我介绍 */}
        <section className="bg-teal-50 p-4 rounded-lg border-l-4 border-teal-300 mt-4">
          <p className="text-gray-700 italic text-sm">{silverInlaidOxLampData.introduction}</p>
        </section>

        {/* 观察任务区 */}
        <section className="mt-8">
          <h2 className="text-lg font-bold text-gray-800 mb-3 flex items-center">
            <span className="bg-teal-100 text-teal-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
              ◇
            </span>
            观察任务
          </h2>
          
          <div className="bg-yellow-50 p-4 rounded-lg border border-yellow-100">
            <h3 className="font-bold text-yellow-800 text-sm mb-2">给小学生的观察任务：</h3>
            <p className="text-gray-700 text-sm mb-4">{silverInlaidOxLampData.studentTask}</p>
            
            <textarea 
              className="w-full border border-dashed border-gray-300 rounded p-3 min-h-[100px] text-sm"
              placeholder="我的发现(在这里写下你的观察):"
            ></textarea>
          </div>
        </section>
      </main>

      {/* 页脚 */}
      <footer className="mt-8 text-center text-xs text-gray-500 pb-4">
  <p>石头妈妈-南京博物院 · 文物教育系列 · 适合打印学习</p>
      </footer>
    </div>
  );
}